@fz10: 10px;
@fz12: 12px;
@fz14: 14px;
@fz16: 16px;

@color-h1: #111111;
@color-h2: #656565;
@color-h3: #919191;
@color-h4: #DF0011;

@color-bg: #f3f4f5;
@theme-color: #DF0011;

page{
  font-size: @fz14;
  box-sizing: border-box;
  background-color: @color-bg;
}
view, button, input{
  box-sizing: border-box;
}
.main{
  padding: 44px 14px 64px 14px;
}

.setting{
  border-radius: 4px;
  margin-bottom: 10px;
  background: #ffffff;

  &__item{
    padding: 15px 0;
    position: relative;
    transition: 300ms ease;
    &:active{
      opacity: .8;
    }
    &:after{
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: @color-bg;
      transform: scaleY(.5);
      transform-origin: left bottom;
    }
    &:last-child{
      &:after{
        content: none;
      }
    }
  }
}

.item{
  display: flex;
  align-items: center;
  border-left: 4px solid @theme-color;
  padding: 0 10px;
  &__l{
    flex-shrink: 0;
    color: @color-h2;
  }
  &__c{
    flex: 1;
    padding: 0 12px;
  }
  &__r{
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
}

.avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: @color-bg;
}
.logo{
  width: 30px;
  height: 30px;
}
.rtext{
  // padding: 0 5px;
}
.ricon{
  width: 20px;
  height: 20px;
  margin-left: 5px;
}


.btn-wrap{
  position: fixed;
  left: 0;
  bottom: 12px;
  width: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  .btn{
    padding: 0 40px;
    color: #fff;
    font-size: @fz14;
    background: linear-gradient(90deg, @theme-color, #e54b4d);
    box-shadow: 0 0 20px #ccc;
    transition: all 300ms;
    &:before, &:after{
      content: none;
    }
    &:active{
      opacity: .8;
    }
  }
}

.input{
  min-width: 0;
  text-align: right;
}
.tips{
  color: @color-h2;
  font-size: @fz10;
}